<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<title></title>
	</head>

	<body>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		
		<div style="height:400px;  width: 900px; margin: 0 auto; border: 1px solid #ccc;">
			
			<div id="container">
				
			</div>
		</div>

		<!-- ECharts单文件引入 -->
		<script src="http://cdn.hcharts.cn/jquery/jquery-2.1.4.min.js"></script>
		<!--<script type="text/javascript" src="js/highstock1.2.5.js"></script>-->
		<script type="text/javascript" src="js/highstock.js"></script>
		<script type="text/javascript">
			Highcharts.setOptions({
				global: {
					useUTC: true
				},
				lang: {
					rangeSelectorZoom: '',
					months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
					shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
						'9月', '10月', '11月', '12月'
					],
					weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				}
			});
			// 2222222222222222222222222222222222222
			function initHourChart() {
				
				console.log("start %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%");
				
				var chart = null;
				//需要请求的api action 地址
				var path = "11.json";
				$.getJSON(path, function(data) {
					if (data.length == 0) {
						return;
					}
					console.log(data.length);
					var Price = [];
					//获取首个变量的时间，用来计算获取时间的最小值和最大值
					var firstData = data[0].time;
					
					console.log("1:" + firstData.substring(0, 4));
					
					console.log("2:" + firstData.substring(6, 8));
					var minTime = Date.UTC(parseInt(firstData.substring(0, 4)), parseInt(firstData.substring(4, 6)) - 1, parseInt(firstData.substring(6, 8)), 6);
					var maxTime = Date.UTC(parseInt(firstData.substring(0, 4)), parseInt(firstData.substring(4, 6)) - 1, parseInt(21), 4);
					for (i = 0; i < data.length; i++) {
						Price.push([
							UTC(data[i].time),
							parseInt(data[i].price)
						]);
					}
					Price.sort();
					var option = {
						colors: ['#4d73a8'],
						chart: {
							renderTo: "container", // 需要渲染的DIV 的ID名称
							alignTicks: true,
							pinchType:"none" // 禁止缩放
						},
						navigator: false,
						scrollbar: false,
						rangeSelector: false,
						plotOptions: {
							line: {
								lineWidth: 1
							},
							
							line: {
								lineWidth: 1,
								states: {
									hover: {
										lineWidth: 1,
										halo: {
											size: 0
										}
									}
								},
								marker: {
									enabled: false
								}
							}
						},
						xAxis: [{
							ordinal:false,
							//tickInterval: 60 * 1000 * 30 * 2,
							tickInterval:60 * 60 * 1000 * 2,
							min: minTime,
							max: maxTime,
							startOnTick: true,
							endOntick: true,
							gridLineColor: '#ccc',
							gridLineDashStyle: 'dashed',
							gridLineWidth: 1,
							tickColor: 'none',
							lineColor: '#ccc',
							labels: {
								formatter: function() {
									var date = new Date(this.value)
									var hours = date.getHours()
									if (hours < 8) {
										hours = hours + 24
									}
									return addZero(hours - 8) + ':' + addZero(date.getMinutes())
								}
							}
						}],
						yAxis: [{
//							gridLineWidth: 1,
//							lineColor: '#f00',
//							labels: {
//								align: "left"
//							},
//							offset: 30,
//							min: 0,
//							gridLineColor: '#ccc',
//							gridLineDashStyle: 'solid'
						}],
						credits: false, //版权
						tooltip: {
							shared:true,
							useHTML:true,
							borderColor:'#eee',
							backgroundColor:'rgba(255, 255, 255, 1)',
							formatter: function() {
								var formatterStr = "日&nbsp;&nbsp;&nbsp;期:" + Highcharts.dateFormat('%Y/%m/%d', this.x) + "<br/>"
								+ "时&nbsp;&nbsp;&nbsp;间:" + Highcharts.dateFormat('%H:%M:%S', this.x) + "<br/>"
								+ chart.series[0].name
								+ ":<span style='color:red;font-size: 14px;'>"
								+ Highcharts.numberFormat(this.y, 2, ".","") +"</span> 元<br>"
								return formatterStr;
							},
//xDateFormat: '%Y-%m-%d, %A',//鼠标移动到趋势线上时显示的日期格式
//valueDecimals:2,
							crosshairs: [{
								enabled: true, //是否显示X轴标线
								width: 1, //标线宽度
								color: 'red' //标线颜色值
							}, {
								enabled: true, //是否显示Y轴标线
								width: 1, //标线宽度
								color: 'red' //标线颜色值
							}]
						},
						series: [{
							name: '交易价',
							color: '#33A752',
							lineWidth: 1,
							type: 'line',
							yAxis: 0,
							xAxis: 0,
							pointStart: minTime,
							data: Price
						}]
					}
					chart = new Highcharts.StockChart(option);
				});
			}
			// 3333333333333333333333333
			function addZero(str) {
				if (str < 10) {
					return str = '0' + str
				}
				return str
			}

			function UTC(time) {
				if (time == undefined) return
				if (time.length < 10) {
					time = '' + time;
					return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6, 8));
				} else {
					time = '' + time;
					return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6, 8), time.substring(9, 11), time.substring(12, 14), time.substring(15, 17));
				}
			}
			
			$(
				initHourChart
			)
		</script>
	</body>

</html>